import React, { useEffect } from 'react'
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

const Chart4AB = () => {
    var chartDom: HTMLElement
    var myChart: echarts.ECharts
    var option: EChartsOption;
    useEffect(() => {
        chartDom = document.getElementById('chart4')!;
        myChart = echarts.init(chartDom);
        option = {
            title: {
                text: 'Basic Radar Chart'
            },
            legend: {
                data: ['Allocated Budget', 'Actual Spending']
            },
            radar: {
                // shape: 'circle',
                indicator: [
                    { name: 'Sales', max: 6500 },
                    { name: 'Administration', max: 16000 },
                    { name: 'Information Technology', max: 30000 },
                    { name: 'Customer Support', max: 38000 },
                    { name: 'Development', max: 52000 },
                    { name: 'Marketing', max: 25000 }
                ]
            },
            series: [
                {
                    name: 'Budget vs spending',
                    type: 'radar',
                    data: [
                        {
                            value: [4200, 3000, 20000, 35000, 50000, 18000],
                            name: 'Allocated Budget'
                        },
                        {
                            value: [5000, 14000, 28000, 26000, 42000, 21000],
                            name: 'Actual Spending'
                        }
                    ]
                }
            ]
        };
        onResize()
    }, [])

    const onResize = () => {
        option && myChart.setOption(option);
        myChart.resize()
    }
    window.addEventListener('resize', onResize)
    return (
        <div id="chart4" style={{ width: '100%', height: '100%' }}></div>
    )
}

export default Chart4AB